import React, { useState } from 'react'
import { Form, Input, Checkbox, Segment, Button, Select, Tabs, TabPanel, Table } from 'tea-component'

const { scrollable } = Table.addons

const tabs = [
  { id: 'basic', label: 'Inbound rule' },
  { id: 'network', label: 'Outbound rule' }
]

const records = [
  { Source: '0.0.0.0/0', 'Protocol Port': 'tcp:3306', Policy: 'Allow', Notes: 'TCP port 3389 open for Windows CVMs' },
  { Source: '::/0', 'Protocol Port': 'ICMPV6', Policy: 'Allow', Notes: 'TCP port 3389 open for Windows CVMs' }
]

const presetTagKeys = [
  { value: '1', text: 'Please select a tag key' },
  { value: '2', text: 'Department' },
  { value: '3', text: 'Team' },
  { value: '4', text: 'Project' }
]

const presetTagValues = [
  { value: '1', text: 'Please select the tag value' },
  { value: '2', text: 'Finance' },
  { value: '3', text: 'AML' },
  { value: '4', text: 'Marketing' }
]

export default function FormLayoutExample() {
  /** @type {any} */
  const [layout, setLayout] = useState('default')
  const [tagRecords, setTagRecords] = useState([
    {
      id: 0,
      tagKey: presetTagKeys,
      tagValue: presetTagValues
    }
  ])

  const Slice = () => (
    <Form.Item>
      <div
        style={{
          position: 'absolute',
          left: '-127px',
          right: '23px',
          borderBottom: '1px solid rgb(228, 233, 240)'
        }}
      ></div>
    </Form.Item>
  )

  const RuleTable = () => (
    <Table
      records={records}
      recordKey="Source"
      columns={[
        { key: 'Source', header: 'Source' },
        { key: 'Protocol Port', header: 'Protocol Port' },
        {
          key: 'Policy',
          header: 'Policy'
        },
        {
          key: 'Notes',
          header: 'Notes'
        }
      ]}
      addons={[
        // 支持表格滚动，高度超过 192 开始显示滚动条
        scrollable({
          maxHeight: 192,
          // minWidth: 3600,
          onScrollBottom: () => console.log('到达底部')
        })
      ]}
    />
  )

  return (
    <div className="example-stage">
      <Form>
        <Form.Item label="Security Groups">
          <Segment
            defaultValue="default"
            options={[
              { value: 'default', text: 'Create security group' },
              { value: 'fixed', text: 'Existing Security Groups' }
            ]}
          />
          <div style={{ height: '10px' }}></div>
          <Select
            refreshable
            style={{ marginRight: '12px' }}
            options={[
              { value: '1', text: 'Select a security group' },
              { value: '2', text: 'sg-79kdh|MAMPU_demo' },
              { value: '3', text: 'sg-74kfdzh|default' }
            ]}
            defaultValue={'1'}
            placeholder="please select"
            button={selectedOption => <Input value={selectedOption.text} />}
          />
        </Form.Item>
        <Form.Item label="Security GroupRules">
          <Tabs tabs={tabs}>
            <TabPanel id="basic">
              <RuleTable></RuleTable>
            </TabPanel>
            <TabPanel id="network">
              <RuleTable></RuleTable>
            </TabPanel>
          </Tabs>
        </Form.Item>

        <Slice />

        <Form.Item label="project">
          <Select
            appearance="button"
            style={{ marginRight: '12px' }}
            options={[{ value: '1', text: 'Default project' }]}
            defaultValue={'1'}
            placeholder="please select"
          />
        </Form.Item>

        <Form.Item label="Tag">
          <Table
            records={tagRecords}
            recordKey="id"
            columns={[
              {
                key: 'TagKey',
                header: 'Tag key',
                render: cvm => (
                  <>
                    <Select
                      appearance="button"
                      style={{ marginRight: '12px' }}
                      options={cvm.tagKey}
                      defaultValue={'1'}
                      placeholder="please select"
                    />
                  </>
                )
              },
              {
                key: 'TagValue',
                header: 'Tag value',
                render: cvm => (
                  <>
                    <Select
                      appearance="button"
                      style={{ marginRight: '12px' }}
                      options={cvm.tagValue}
                      defaultValue={'1'}
                      placeholder="please select"
                    />
                  </>
                )
              },
              {
                key: 'Operation',
                header: 'Operation',
                render: cvm => (
                  <>
                    <a onClick={() => setTagRecords(tagRecords.filter(n => n.id !== cvm.id))}>delete</a>
                  </>
                )
              }
            ]}
            addons={[
              // 支持表格滚动，高度超过 192 开始显示滚动条
              scrollable({
                maxHeight: 192,
                // minWidth: 3600,
                onScrollBottom: () => console.log('到达底部')
              })
            ]}
          />
          <Button
            type="link"
            onClick={() =>
              setTagRecords([
                ...tagRecords,
                {
                  id: ~~tagRecords[tagRecords.length - 1]?.id + 1,
                  tagKey: presetTagKeys,
                  tagValue: presetTagValues
                }
              ])
            }
          >
            add
          </Button>
        </Form.Item>

        <Slice />

        <Form.Item
          label="Instance Name"
          suffix="Supports batch sequential naming or pattern string-based naming. You can enter up to 128 characters, and 128 more characters are allowed"
        >
          <Input placeholder="Default“unnamed”if it's left" />
        </Form.Item>
        <Form.Item label="Login Methods">
          <Segment
            defaultValue="SSH Key Pair"
            options={[
              { value: 'Set Password', text: 'Set Password' },
              { value: 'SSH Key Pair', text: 'SSH Key Pair' },
              { value: 'Random Password', text: 'Random Password' }
            ]}
          />
        </Form.Item>
        <Form.Item label="Username">
          <Button type="text">root</Button>
        </Form.Item>
        <Form.Item label="SSH Key">
          <Select
            appearance="button"
            style={{ marginRight: '12px' }}
            options={[
              { value: '1', text: 'skey-12nkdkjfh' },
              { value: '2', text: 'skey-HK2dksfjl' },
              { value: '3', text: 'skey-ne323B32k' }
            ]}
            placeholder="Please select a  key"
          />
        </Form.Item>
        <Form.Item
          message="Free Anti-DDoS Protection and CWP Basic (component installation required)"
          label={
            <>
              <p>Security</p>
              <p>Reinforcement</p>
            </>
          }
        >
          <Checkbox name="la">Enable for free</Checkbox>
        </Form.Item>
        <Form.Item
          label={
            <>
              <p>Cloud</p>
              <p>Monitoring</p>
            </>
          }
          message="FREE cloud monitoring, analysis, alarming, and server monitoring metrics (component installation required)"
        >
          <Checkbox name="la">Enable for free</Checkbox>
        </Form.Item>
        <Form.Item
          message="Enable it to terminate CVM at a specified time."
          label={
            <>
              <p>Scheduled</p>
              <p>Scheduled</p>
            </>
          }
        >
          <Checkbox name="la">Enable Scheduled Termination</Checkbox>
        </Form.Item>
      </Form>
    </div>
  )
}
